// 建材插件的使用步骤:
// 1.初始化 --> 一个剪裁框
let image = $('#image')
let option = {
  // 约束剪裁比例
  aspectRatio: 1,
  // 指定预览区域
  preview: '.img-preview',
}
// 调用cropper方法,创建剪裁区
image.cropper(option)


// ---------------------------点击上传按钮,触发文件域的单击事件-----------------
//  contains("内容")  选择包含内容的标签
$('button:contains("上传")').on('click', function () {
  // 触发文件域的单击事件
  $('#file').trigger('click')
})
// ------------------------图片预览-------------
// 文件域内容改变,更换剪裁区的图片
$('#file').on('change', function () {
  if (this.files.length > 0) {
    // 获取文件对象
    let fileObj = this.files[0]
    // 创建URL
    let url = URL.createObjectURL(fileObj)
    // 更换剪裁区的图片
    image.cropper('replace', url)
  }
})


// 点击确定 --> 剪裁图片 --> 转换格式 --> ajax提交
$('button:contains("确定")').on('click', function () {
  // 调用插件的语法,剪裁
  let canvas = image.cropper('getCroppedCanvas', { width: 30, height: 30 })
  // 转成base64 格式
  let str = canvas.toDataURL('image/jpeg', 0.5)
  // 提交这个base64格式的字符串
  $.ajax({
    type: 'POST',
    url: '/my/user/avatar',
    data: { avatar: str },
    success: function (res) {
      if (res.status === 0) {
        // 调用页面的函数
        window.parent.getUserInfo()
      }
    }
  })
})